<template>
<!-- 轮播底部浮动版块 -->
  <div class="row floatBottom justify-content-md-center">
    <div class="col-md-3 col-4  item-box " v-for="item in banner_bot" :key="item.id">
      <div class="img">
        <img :src="item.imgsrc" class="img-fluid">
      </div>
      <div class="plan d-none d-md-block">
        <div class="title">{{item.title}}</div>
        <div class="info">{{item.info}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banner_bot: [
        { id: 0, imgsrc: 'http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/c95a3544-d090-41f3-b66a-48c709ea9767.png', title: 'Spring Boot', info: '基于Spring Boot构建，遵循RESTful规范' },
        { id: 1, imgsrc: 'http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/4291fb6d-9999-4b11-bef2-b501b7353a84.png', title: 'RESTful 规范', info: '齐全swagger文档，完整的单元测试' },
        { id: 2, imgsrc: 'http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/7167b06b-efb7-4488-9b3d-a22f60c2a642.png', title: '前后端分离', info: '前端采用webpack+vue组件化模式' }
      ],
    }
  }
}
</script>

<style lang="less" scoped>
.floatBottom {
  height: 8rem;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  .item-box {
    cursor: pointer;
    transition: all 0.5s;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .img {
      width: 4.38rem;
      height: 4.38rem;
    }
    .plan {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #ffffff;
      .title {
        font-size: 1.5rem;
      }
      .info {
        font-size: 1rem;
      }
    }
  }
  .item-box:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }
}
</style>